<template>
  <div>


    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="warning" plain @click="exportfun">导出</el-button>
      </div>
    </el-header>
    <!-- 顶部功能按钮结束 -->
    <!-- 主体表格开始 -->
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          sortable
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
			style="color: orange"
			@click="updateForm(scope.row.doubleQualifiedId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </MyTable>
    <!-- 主体表格结束 -->
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 分页区结束 -->

  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import {
  showPageApi,
  exportApi,
} from "@/api/reserveArms/lottery";
export default defineComponent({
  name: "lottery",
  setup() {
    onMounted(() => {
      showPage_methods.showPage();
    });
    // 查询和导出部分
    const search_state = reactive({
      // 姓名查询
      // 查询内容
      searchData: "",
      //  选择字段
      selectField: "",
      // 高级查询
      searchVisible: false,
      advancedSearch: {
        name: "",
        year: "",
        loginNumber: "",
        batch: "",
        nation: "",
        cultureralProgram: "",
        householdType: "",
        age: "",
        doubleQualifiedId: "",
        isOrderSoldiers: "",
        registrationTime: "",
        sex: "",
      },
    });
   const search_methods = {
	   get_nowTime() {
        var date = new Date();
        var year = date.getFullYear(); //  返回的是年份
        var month = date.getMonth() + 1; //  返回的月份上个月的月份，记得+1才是当月
        var dates = date.getDate(); //  返回的是几号
        const nowTime = `(${year}/${month}/${dates})`;
        return nowTime;
      },
      // 导出
      async exportfun() {
        const nowTime = search_methods.get_nowTime();
        let blobUrl = await exportApi();
        const a = document.createElement("a");
        a.style.display = "none";
        a.download = `摇号信息${nowTime}`;
        a.href = blobUrl;
        a.click();
        a.remove();
        ElMessage.success("导出成功");
      },
      //   重置高级查询
      reset() {
        //   element表单方法没实现
        //  _this.$refs.advancedSearchRef.resetFields();
        search_state.advancedSearch = {};
      },
      advancedQuery() {
        search_state.searchVisible = true;
      },
      //   关闭高级查询
      advancedQueryClose() {
        search_state.searchVisible = false;
        search_state.advancedSearch = {};
      },
    };
   const showPage_state = reactive({
      // 表头行字段
      columns: [
        { name: "摇号编号", show: true, prop: "lotteryNumber" },
        { name: "摇号排序值", show: true, prop: "lotterySortValue" },
        { name: "摇号进度", show: true, prop: "lotterySchedule" },
        { name: "摇号总名额", show: true, prop: "lotteryTotalNumber" },
        { name: "已摇中名额", show: true, prop: "shakeQuota" },
        { name: "剩余名额", show: true, prop: "remainingPlaces" },
        { name: "摇号状态", show: true, prop: "stateLottery" },
      ],
      // 页面展示数据
      allList: [],
      //分页数据
      page: {
        current: 1,
        pageSize: 15,
        pageNum: 1,
        total: 0,
      },
      visible: false,
    });
    const showPage_methods = {

      changeColumn(columns) {
        showPage_state.columns = columns;
      },
      async showPage() {
        const res = await showPageApi.get(showPage_state.page);
        showPage_state.page.total = res.data.total;
        showPage_state.allList = res.data.result;
		console.log(res);

      },
      // 改变页码
      handleCurrentChange(newSize) {
        showPage_state.page.pageNum = newSize;
        // 重新获取数据
        showPage_methods.showPage();
      },
      handleSizeChange(newPage) {
        showPage_state.page.pageSize = newPage;
        showPage_methods.showPage();
      },
    };



    return {
      ...toRefs(showPage_state),
      ...showPage_methods,
    //   ...toRefs(editForm_state),
    //   ...editForm_methods,
    //   ...toRefs(delete_state),
    //   ...delete_methods,
      ...toRefs(search_state),
      ...search_methods,
    };
  },
});
</script>

<style  scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}

.top_button {
  display: flex;
  justify-content: space-between;
}
</style>




